<template>
  <view class="content">
    <view>
      <c-navBar title="充值记录" :extraInfo="schoolName"></c-navBar>
      <view class="filter-box flex flex-a">
        <uni-datetime-picker
          rangeSeparator="至"
          v-model="daterange"
          type="daterange"
        />
        <van-button
          @click="search"
          class="search ml-15"
          color="#478AD6"
          icon="search"
          >搜索</van-button
        >
      </view>
    </view>

    <view class="content-bottom-style">
      <c-list
        v-model:loading="loading"
        v-model:error="error"
        v-model:finished="finished"
        error-text="请求失败，点击重新加载"
        @load="Loads"
        class="history-list-container"
        v-if="historyList.length > 0"
      >
        <view
          class="history-card"
          v-for="history in historyList"
          :key="history.admin_id"
        >
          <view class="info-box">
            <view class="label">收款人</view>
            <text class="value">{{ history.collection_name }}</text>
          </view>
          <view class="flex flex-a mt-13">
            <view class="info-box">
              <view class="label">收款账号</view>
              <text class="value">{{ history.collection_account }}</text>
            </view>
            <view class="info-box infobox-right" style="margin-left: 60rpx">
              <!-- <view class="label">充值原因</view>
	        <text class="value">{{ history.rechargeReason }}</text> -->
            </view>
          </view>
          <view class="flex flex-a mt-13">
            <view class="info-box flex-ba">
              <view class="label">剩余小时数</view>
              <text class="value" style="margin-left: 20rpx"
                >{{ history.before_module_minute }}¥</text
              >
            </view>
            <view class="info-box infobox-right" style="margin-left: 50rpx">
              <view class="label">充值时间</view>
              <text class="value" style="color: #43cf7c">
                {{ history.create_time }}
              </text>
            </view>
          </view>
          <view class="flex flex-a mt-13">
            <view class="info-box">
              <view class="label">充值小时数</view>
              <text class="value" style="margin-left: 20rpx"
                >{{ history.module_minute }}¥</text
              >
            </view>
            <view class="info-box infobox-right">
              <view class="label" style="width: 200rpx">充值后小时数</view>
              <text
                class="value"
                style="color: #d43030; font-weight: 600; margin-left: 16rpx"
                >{{ history.after_module_minute }}¥</text
              >
            </view>
          </view>
          <view class="info-box mt-13">
            <view class="label">录入人</view>
            <text class="value">{{ history.admin.username }}</text>
          </view>
        </view>
      </c-list>
      <van-empty description="暂无数据" v-else />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"

import { getSchoolHourLog } from "@/apis/school"
const queryParams = reactive({
  start_date: "",
  end_date: "",
  school_id: ""
})
const schoolName = ref("")
const daterange = ref([])
const loading = ref(false)
const finished = ref(true)
const error = ref(false)
const historyList = ref([])
onLoad((opt) => {
  queryParams.school_id = opt.schoolId
  schoolName.value = opt.schoolName
})
onShow(() => {
  Loads()
})
const Loads = () => {
  getList()
}
const getList = () => {
  loading.value = true
  getSchoolHourLog(queryParams)
    .then((res) => {
      if (res.code === 1) {
        historyList.value = res.data
        loading.value = false
      } else {
        error.value = true
        loading.value = false
      }
    })
    .catch((err) => {
      error.value = true
      loading.value = false
    })
}
const search = () => {
  console.log(daterange)

  queryParams.start_date = daterange.value[0] || ""
  queryParams.end_date = daterange.value[1] || ""
  Loads()
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.content-bottom-style {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.filter-box {
  padding: 32rpx;

  .search {
    width: 174rpx;
    height: 33px;
    border-radius: 10px;
  }

  .ml-15 {
    margin-left: 30rpx;
  }
}

.history-list-container {
  .history-card {
    padding: 26rpx 30rpx 34rpx 34rpx;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    margin: 0 32rpx 32rpx;

    .info-box {
      display: flex;
      align-items: center;
      font-size: 16px;

      .label {
        width: 160rpx;
        color: rgba(51, 51, 51, 1);
      }

      .value {
        color: rgba(102, 102, 102, 1);
      }
    }

    .infobox-right {
      margin-left: 36rpx;
    }

    .mt-13 {
      margin-top: 26rpx;
    }
  }
}

:deep(.uni-date-x--border) {
  border-radius: 10px;
}

:deep(.uni-date-range) {
  border-radius: 10px;
}
</style>
